<script setup>
import { ref } from 'vue'

const capsuleForm = ref({
  title: '',
  content: '',
  type: 'letter',
  openDate: ''
})

const submitForm = () => {
  console.log('提交表单:', capsuleForm.value)
  // 这里可以添加提交逻辑
}
</script>

<template>
  <div class="create-capsule">
    <h1 class="page-title">创建时光胶囊</h1>
    
    <form class="capsule-form" @submit.prevent="submitForm">
      <div class="form-group">
        <label>胶囊标题</label>
        <input 
          v-model="capsuleForm.title"
          type="text"
          placeholder="给这个胶囊起个名字"
        >
      </div>
      
      <div class="form-group">
        <label>胶囊类型</label>
        <select v-model="capsuleForm.type">
          <option value="letter">文字信件</option>
          <option value="photo">照片记忆</option>
        </select>
      </div>
      
      <div class="form-group">
        <label>内容</label>
        <textarea 
          v-model="capsuleForm.content"
          placeholder="写下想说的话..."
          rows="6"
        ></textarea>
      </div>
      
      <div class="form-group">
        <label>开启时间</label>
        <input 
          v-model="capsuleForm.openDate"
          type="date"
        >
      </div>
      
      <button type="submit" class="submit-btn">封存胶囊</button>
    </form>
  </div>
</template>

<style scoped>
.create-capsule {
  max-width: 800px;
  margin: 0 auto;
}

.page-title {
  margin-bottom: 2rem;
  color: #2c3e50;
  font-size: 2rem;
}

.capsule-form {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #2c3e50;
  font-weight: 500;
}

input, select, textarea {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
}

textarea {
  resize: vertical;
}

.submit-btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 100%;
}

.submit-btn:hover {
  background-color: #2980b9;
}
</style> 